<script  setup>
import { ref } from "vue";
import { useData, useBooks, useGoodsList,useTest } from "./myHooks"
import { getBooksApi } from "@/api/crud"

const { count, addCount } = useData();


const books = useBooks();
console.log("books", books);

const pageIndex = ref(1);
const {goodsList} = useGoodsList(pageIndex, 10);

console.log("goodsList",goodsList);

const person  =useTest();

console.log("person",person);

const {id,name}  =useTest();

console.log("id",id);

</script>

<template>
    <h1>自定义hooks示例：</h1>
    <p>count:{{ count }}</p>
    <input type="button" value="count++" @click="addCount">
    <hr />
    <ul>
        <li v-for="item in books">
            {{ item.name }}
        </li>
    </ul>
    <h3>商品列表：</h3>
    <p>页码：
        <select v-model="pageIndex">
            <option>1</option>
            <option>2</option>
            <option>3</option>
        </select>
    </p>
    <ul>
        <li v-for="item in goodsList" :key="item.proid">
            {{ item.proname }}
        </li>
    </ul>
</template>

<style lang="css" scoped></style>
